<template>
  <div class="pageContent" :class="[isScreen&&'pt50']">
    <fullScreen v-model="isScreen" :list="screenList.arr" :loop="false"></fullScreen>
    <div class="inner-padding pt20">
      <div class="work">
        <ul class="workList f36">
          <li v-for="(item, i) in list" :key="i">
            <span class="info" 
            @mouseover="onMouseover(item)"
            @mouseleave="onMouseleave"
            @click="onClick">{{item.name}}{{i}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="v-hover" v-show="hover">
      <img :src="imgLink.img" :alt="imgLink.name">
    </div>

  </div>
</template>
<script>
import { onMounted, ref, reactive, computed, inject } from 'vue'
import fullScreen from './components/fullScreen'
import mainNav from './components/main-nav'
import { useStore } from "vuex";
import { testApi } from "@/api";


export default {
  components: {
    mainNav,fullScreen
  },
  setup(){
    const store = useStore()
    const isScreen = ref(false)
    const setNavFixed = inject('setNavFixed')

    onMounted(()=>{
        // debounce(getStep, 1000)()
    })

    const list = reactive([])
    testApi(1,30,40).then(res=>{
      list.push(...res.data)
    })
    
    const screenList = reactive({
      arr: []
    })

    const onClick = () => {
      isScreen.value = true
      setNavFixed(true)
      testApi(1,3,{},3).then(res=>{
        screenList.arr = res.data
        console.log(screenList.arr)
      })
    }


    const hover = ref(false)
    const imgLink = ref('')
     
    const onMouseover = (item) => {
      hover.value = true
      imgLink.value = item
    }
    const onMouseleave = () => {
      hover.value = false
      imgLink.value = ''
    }

    return {
      hover, imgLink, onMouseover, onMouseleave,
      list,
      isScreen,
      onClick, screenList
    }
  }
}
</script>
<style lang="less" scoped>
.v-hover{
  position: fixed;
  z-index: 2000;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  @media @max768{
    display: none;
  }
  img{
    display: block;
    min-width: 200px;
  }
}

.work{
  text-transform: uppercase;
  min-height: 70vh;
}
.workList{
  .padding-bottom(30px) ;
  .padding-top(20px) ;
  .info{
    cursor: pointer;
    color: var(--white);
    &:hover{
      font-style: italic;
    }
  }
}
</style>